<template>
    <div id="main">
        <div id="body">
            <el-form id="infoForm" label-position="left" label-width="15%" :model="student" v-loading="loading[0]">
                <el-form-item label="权限">
                    <el-input type="text" id="role" v-model="student.roleId" disabled />
                </el-form-item>

                <el-form-item label="姓名">
                    <el-input type="text" id="name" v-model="student.username" disabled />
                </el-form-item>
                <el-form-item label="学号" v-if="student_role">
                    <el-input type="text" id="studentId" v-model="student.userId" disabled />
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input type="email" id="email" v-model="student.email" @input="showBtn" />
                </el-form-item>
                <el-form-item label="性别" class="radio-align-left">
                    <el-radio-group v-model="student.gender">
                        <el-radio disabled label="1">男</el-radio>
                        <el-radio disabled label="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="专业" v-if="student_role">
                    <el-input type="text" id="major" v-model="student.majorName" disabled />
                </el-form-item>
                <el-form-item label="班级">
                    <el-input type="text" id="class" v-model="student.classId" disabled />
                </el-form-item>
                <el-form-item>
                    <el-button v-show="isShow" type="primary" plain @click="saveInfo">保存信息</el-button>
                </el-form-item>
                <el-form-item style="margin-left: -15%;">
                    <el-button type="info" @click="exit_safely" class="exist_button">安全退出</el-button>
                </el-form-item>
            </el-form>
            <div class="middle"></div>

            <div class="setting" v-if="student_role">
                <div class="major_panel">
                    <h2>选课信息</h2>
                    <el-table :data="subjectData" style="width: 100%" v-loading="loading[1]">
                        <el-table-column prop="subjectId" label="课程编号" width="150">
                        </el-table-column>
                        <el-table-column prop="subjectName" label="课程" width="150">
                        </el-table-column>
                        <el-table-column prop="username" label="任课教师" width="90">
                        </el-table-column>
                    </el-table>
                </div>
                <span class="middle"></span>
                <div class="dir_history">
                    <h1>
                        平时作业日志
                    </h1>
                    <div id="medals" v-loading="loading[2]">
                        <medal v-for="(exp, index) in experience" :key="index" :exp="exp" @delete-exp="getExp" />
                    </div>
                </div>
            </div>
            <div class="setting1" v-if="teacher_role">
                <h1 v-show="value != null" style="width: 100%;">
                    {{ value }}班整体情况
                </h1>
                <el-select v-model="value" placeholder="请选择班级">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <class-overview v-show="value === classId" :classInfo="classData"></class-overview>
                <h1 v-show="!(value === classId)">请选择班级</h1>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import Medal from '../../components/module_components/Medal.vue';
import { getExp, getInfoURL, getStudentByClass, getSubInfoURL, putInfoURL } from '@/utils/urlManager';
import '@/utils/InterceptorUtils';
import ClassOverview from '@/components/module_components/ClassOverview.vue';

export default {
    components: { Medal, ClassOverview },
    name: "StudentInfo",
    data() {
        return {
            classData: {
                className: '全日制本科大四',
                educationType: '全日制本科',
                grade: '大四',
                students: [],
                nums: 0
            },
            student: {
                userId: "",
                username: "",
                roleId: '',
                gender: '',
                email: "",
                majorName: "",
                classId: "",
            },
            loading: [true, true, true],
            isNull: true,
            experience: [],
            isShow: false,
            subjectData: [],
            student_role: false,
            teacher_role: false,
            admin_role: false,
            options: [
                { value: '2101', label: '软件2101班' },
                { value: '2102', label: '软件2102班' },
                { value: '2103', label: '软件2103班' }
            ],
            value: '',
            classId: '',
        };
    },
    mounted() {
        this.initData();
    },
    methods: {
        getStudents() {
            axios.get(getStudentByClass, {
                params: {
                    classId: localStorage.getItem("classId"),
                },
            })
            .then((response) => {
                if (response.data.data) {
                    this.classData.students = response.data.data;
                    this.classData.nums = this.classData.students.length;
                }
            })
            .catch((err) => {
                console.log(err);
            });
        },
        showClass11() {
            this.showClass = true;
        },
        getExp() {
            axios.get(getExp)
            .then((response) => {
                if (response.data.data) {
                    this.experience = response.data.data;
                }
                this.loading[2] = false;
            })
            .catch((err) => {
                this.loading[2] = false;
                console.log(err);
                this.$message.error("历史记录获取失败");
            });
        },
        saveInfo() {
            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailPattern.test(this.student.email)) {
                this.$message.warning("邮箱格式不正确，请输入有效的邮箱地址（例如：example@domain.com）");
                return;
            }
            if (!this.student.email.endsWith("com")) {
                this.$message.warning("邮箱格式请以 'com' 结尾");
                return;
            }
            axios.put(putInfoURL + "?email=" + this.student.email)
            .then(() => {
                this.$message.success('信息已保存');
                this.initData();
            })
            .catch((err) => {
                console.log(err);
                this.$message.error("信息修改失败");
            });
            this.isShow = false;
        },
        resetInfo() {
            this.$confirm('此操作将重置信息，是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.student = { ...this.initialInfo };
                this.$message.success('信息已重置');
            }).catch(() => {});
        },
        exit_safely() {
            this.$confirm('是否退出?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$router.push("/login");
            }).catch(() => {});
        },
        showBtn() {
            this.isShow = true;
        },
        initData() {
            axios.get(getInfoURL)
            .then((response) => {
                if (response.data.data) {
                    this.student = response.data.data;
                    localStorage.setItem("classId", this.student.classId);
                    this.classId = this.student.classId;
                    this.options = [
                        { value: this.student.classId, label: this.student.classId + "班级" }
                    ];
                    switch (this.student.roleId) {
                        case "1":
                            this.student.roleId = "学生";
                            this.student_role = true;
                            this.getSubData();
                            this.getExp();
                            break;
                        case "2":
                            this.student.roleId = "老师";
                            this.teacher_role = true;
                            this.getStudents();
                            break;
                        case "3":
                            this.student.roleId = "管理员";
                            this.admin_role = true;
                            break;
                    }
                    localStorage.setItem("student", JSON.stringify(this.student));
                    localStorage.setItem("gender", this.student.gender);
                } else {
                    this.$message.warning("信息获取失败");
                }
                this.loading[0] = false;
            })
            .catch((err) => {
                this.loading[0] = false;
                console.log(err);
            });
        },
        getSubData() {
            axios.get(getSubInfoURL)
            .then((res) => {
                this.subjectData = res.data.data || [];
            })
            .catch((err) => {
                console.error(err);
            });
            this.loading[1] = false;
        },
    },
};
</script>

<style scoped>
@media screen and (min-width: 768px) {
    #main {
        width: 100%;
        padding: 20px;
        border: 1px solid #ccc;
        background-color: #f9f9f9;
        background-image: url("../../assets/background/background.png");
        background-size: cover;
    }

    #body {
        display: flex;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.95);
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    }

    #infoForm {
        width: 25%;
        height: 90%;
        padding: 50px 30px 0 30px;
    }

    .middle {
        height: 100%;
        width: 10px;
        background-color: rgba(245, 245, 245, 0.95);
    }

    .setting {
        width: 69%;
        height: 100%;
        display: flex;
    }

    .setting1 {
        width: 69%;
        height: 100%;
    }

    .setting > div {
        width: 50%;
    }

    #medals {
        overflow: auto;
        width: 100%;
        height: 70%;
    }

    .exist_button {
        padding: 5px;
        background-color: rgba(0, 0, 0, 0);
        color: black;
        margin-right: 100%;
        margin-top: 140px;
    }

    .el-form-item {
        width: 100%;
    }

    .buttons {
        text-align: center;
    }

    .buttons button:hover {
        background-color: #0056b3;
    }

    .el-radio-group {
        padding-right: 50%;
    }

    .major_panel {
        margin-left: 20px;
    }

    ::-webkit-scrollbar {
        width: 0;
    }
}
@media screen and (max-width: 768px) {
    /* Add responsive styles for smaller screens if needed */
}
</style>